<extend name="Public/base"/>
<block name="body">
    <div class="tab-wrap">
        <ul class="tab-nav nav">
            <li class="current" data-tab="tab0"><a href="javascript:;">商品浏览</a></li>
            <li data-tab="tab1"><a href="javascript:;">商品搜索</a></li>
        </ul>
    </div>
    <div class="item-field">
    <div class="tab-content">
    <div class="tab-pane in tab0">
        <!-- 数据表格 -->
        <div class="data-table table-striped">
            <table>
                <thead>
                <tr>
                    <th width="80">商品ID</th>
                    <th>商品编号</th>
                    <th>商品类别</th>
                    <th>商品名称</th>
                    <th>浏览次数</th>
                    <eq name="item_id" value="0">
                        <th width="100">操作</th>
                    </eq>
                </tr>
                </thead>
                <tbody id="lists">
                <volist name="stat" id="vo">
                    <tr>
                        <td>{$vo.id}</td>
                        <td><a href="{:U('/Item/detail?id='.$vo['id'])}" target="_blank" title="点击商品信息">{$vo.number}</a></td>
                        <td>{$vo.category}</td>
                        <td><a href="{:U('/Item/detail?id='.$vo['id'])}" target="_blank" title="点击商品信息">{$vo.name}</a></td>
                        <td>{$vo.viewnum}</td>
                        <eq name="item_id" value="0">
                            <td><a href="javascript:;" onclick="$('#item_id').val({$vo.id});$('#J_search_form').submit();">查看详情</a></td>
                        </eq>
                    </tr>
                </volist>
                </tbody>
            </table>
        </div>
        <div class="chart-body">
            <div id="chart_box" ></div>
            <div class="cache-by">
                数据缓存于：
                {$stat.cacheTime|format_date}
                <empty name="stat.is_new">
                    &nbsp; <a href="javascript:clearCache();">更新</a>
                </empty>
            </div>
        </div>
    </div>
    <div class="tab-pane tab1">
        <div class="data-table table-striped">
            <table>
                <thead>
                <tr>
                    <th width="80">ID</th>
                    <th>关键词</th>
                    <th>搜索次数</th>
                </tr>
                </thead>
                <tbody id="lists">
                <volist name="stats" id="vo">
                    <tr>
                        <td>{$vo.id}</td>
                        <td>{$vo.keyword}</td>
                        <td>{$vo.num}</td>
                    </tr>
                </volist>
                </tbody>
            </table>
        </div>
        <div class="chart-body">
            <div id="chart_boxs" ></div>
            <div class="cache-by">
                数据缓存于：
                {$stats.cacheTimes|format_date}
                <empty name="stats.is_new">
                    &nbsp; <a href="javascript:clearCaches();">更新</a>
                </empty>
            </div>
        </div>
    </div>

    </div>
</block>

<block name="script">
    <script src="__JS__/jquery/jquery.loadtype.js"></script>
    <script language="javascript" type="text/javascript" src="__JS__/My97Date/WdatePicker.js"></script>
    <script language="javascript" type="text/javascript" src="__JS__/echarts/echarts-all.js"></script>
    <script type="text/javascript">
        function clearCache(){
            url = window.location.href;
            $.get(url, {'reload':1}, function(){
                window.location.reload();
            });
        }
        function clearCaches(){
            url = window.location.href;
            $.get(url, {'reloads':1}, function(){
                window.location.reload();
            });
        }
        $(function(){
            showTab();
        });
        //导航高亮
        highlight_subnav("{:U('item')}");
    </script>
    <script type="text/javascript">
       //浏览
        var data1 = '{$total_view}'-'{$viewnum[0]}';
        var data2 = data1-'{$viewnum[1]}';
        var data3 = data2-'{$viewnum[2]}';
        var data4 = data3-'{$viewnum[3]}';
        var data5 = data4-'{$viewnum[4]}';
        var data6 = data5-'{$viewnum[5]}';
        var data7 = data6-'{$viewnum[6]}';
        var data8 = data7-'{$viewnum[7]}';
        var data9 = data8-'{$viewnum[8]}';
        var data10 = data9-'{$viewnum[9]}';
        $('#chart_box').css({height:'600px',width:'1400px', marginTop:'50px'});
        $('#search-form').css({marginTop:'400px'});
        var myChart = echarts.init(document.getElementById('chart_box'));

        option = {
            title: {
                text: '商品浏览次数TOP10',
                subtext: '数据来自网络'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            legend: {
                data: [ '浏览次数']
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'value',
                boundaryGap: [0, 0.01]
            },
            yAxis: {
                type: 'category',
                data : ['{$item[9]}','{$item[8]}','{$item[7]}','{$item[6]}','{$item[5]}','{$item[4]}','{$item[3]}','{$item[2]}','{$item[1]}','{$item[0]}']
            },
            series: [

                {
                    name: '浏览次数',
                    type: 'bar',
                    itemStyle: {
                        normal: {
                            barBorderColor: 'rgb(126 ,192, 238)',
                            color: 'rgb(126 ,192, 238)'
                        }

                    },
                    data:[ '{$viewnum[9]}', '{$viewnum[8]}', '{$viewnum[7]}', '{$viewnum[6]}', '{$viewnum[5]}','{$viewnum[4]}','{$viewnum[3]}','{$viewnum[2]}','{$viewnum[1]}','{$viewnum[0]}']
                }
            ]
        };
        myChart.setOption(option);

        //搜索
        $('#chart_boxs').css({height:'600px',width:'1400px', marginTop:'50px'});

        var myChart = echarts.init(document.getElementById('chart_boxs'));

        options = {
            title: {
                text: '商品搜索次数TOP10',
                subtext: '数据来自网络'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            legend: {
                data: [ '搜索次数']
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'value',
                boundaryGap: [0, 0.01]
            },
            yAxis: {
                type: 'category',
                data : ['{$items[9]}','{$items[8]}','{$items[7]}','{$items[6]}','{$items[5]}','{$items[4]}','{$items[3]}','{$items[2]}','{$items[1]}','{$items[0]}']
            },
            series: [

                {
                    name: '搜索次数',
                    type: 'bar',
                    itemStyle: {
                        normal: {
                            barBorderColor: 'rgb(126 ,192, 238)',
                            color: 'rgb(126 ,192, 238)'
                        }

                    },
                    data:[ '{$viewnums[9]}', '{$viewnums[8]}', '{$viewnums[7]}', '{$viewnums[6]}', '{$viewnums[5]}','{$viewnums[4]}','{$viewnums[3]}','{$viewnums[2]}','{$viewnums[1]}','{$viewnums[0]}']
                }
            ]
        };
        myChart.setOption(options);

    </script>
</block>
